import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls";
import { TextureLoader } from "three";
import * as dat from "dat.gui";
import vertexShader from "./shaders/test/vertex.glsl";
import fragmentShader from "./shaders/test/fragment.glsl";
const gui = new dat.GUI();


const envmap = new THREE.CubeTextureLoader().load([
  "https://s2.loli.net/2022/09/29/X8TDZROlUo6uAyG.png",
  "https://s2.loli.net/2022/09/29/KYEJ9ylQNIe6h4R.png",
  "https://s2.loli.net/2022/09/29/GqseLg6tWoluDzV.png",
  "https://s2.loli.net/2022/09/29/LUk8P21MJG6AtNF.png",
  "https://s2.loli.net/2022/09/29/4BO1JHoM3phFCb7.png",
  "https://s2.loli.net/2022/09/29/5NvAxfCVqlKFRZU.png",
]);

//初始化场景
const scene = new THREE.Scene();

scene.background = new THREE.Color(0x33333f);

const textureLoader = new TextureLoader();
const texture = textureLoader.load("static/textures/texture.jpg");
var uniforms = {
  uDistort: {
    value: 1,
  },
  iTime:{
    value: 0
  },
  uThemeColor: {
    value: new THREE.Color("#000f1f"),
  },
};
const geometry = new THREE.SphereGeometry(2.0, 500.0, 500.0);
const material = new THREE.ShaderMaterial({
  vertexShader,
  fragmentShader,
  transparent: true,
  // wireframe:true,
  uniforms,
  side: THREE.DoubleSide,
  extensions: {
    derivatives: true,
  },
  onBeforeCompile: function (gl, program) {
    console.log(gl, program);
  },
});
const plane = new THREE.Mesh(geometry, material);

scene.add(plane);

// gui
//     .add(material.uniforms.u_color, "value", 0, 2, 0.1)
//     .name("颜色");

const axesHelper = new THREE.AxesHelper(20); //添加xyz的线段提示
// scene.add(axesHelper);

const scpectRatio = window.innerWidth / window.innerHeight;
//初始化摄像机 https://threejs.org/docs/index.html?q=camera#api/en/cameras/PerspectiveCamera
const camera = new THREE.PerspectiveCamera(
  50, //视场，相当于眼睛看到的范围。越大看到的范围越广阔，越小看到的物体越大
  scpectRatio,
  0.1, //低于某个阈值就不可见的距离
  5000 // 超过某个距离就不可见的阈值
);

camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 18;
window.addEventListener("resize", onWindowResize, false);
function onWindowResize(event) {
  renderer.setSize(window.innerWidth, window.innerHeight);
  // console.log(uniforms);
  // uniforms.u_resolution.value.x = renderer.domElement.width;
  // uniforms.u_resolution.value.y = renderer.domElement.height;
}

//初始化渲染器
const canvas = document.querySelector("canvas.threejs");
const renderer = new THREE.WebGLRenderer({
  canvas,
  antialias: true, //开启抗锯齿
});
// renderer.setClearColor(0x333333);
renderer.setSize(window.innerWidth, window.innerHeight); //重新设置渲染器大小
renderer.shadowMap.enabled = true; //开启阴影
renderer.shadowMap.type = THREE.PCFSoftShadowMap; //设置阴影类型
const maxPixelRatio = Math.min(window.devicePixelRatio, 2); //设置最大像素比，最多2
renderer.setPixelRatio(maxPixelRatio);
renderer.outputColorSpace = THREE.SRGBColorSpace;
// renderer.render(scene, camera);

window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight; //重新设置相机比例
  camera.updateProjectionMatrix(); //更新相机比例
  renderer.setSize(window.innerWidth, window.innerHeight); //重新设置渲染器大小
});

// 加入控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; //平滑移动

const clock = new THREE.Clock();
function animate() {
  const time = clock.getDelta();
  uniforms.iTime.value += time;
  controls.update();
  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);
